<template>
    <div id="CreateteamPage">
        <div v-for="team in teams" :key="team.id">
            <van-card
            style="text-align: left;"
            :desc="team.description"
            :title="team.name"
            >
            <template #thumb>
                <van-image
                    width="60px"
                    height="60px"
                    fit="cover"
                    position="left"
                    :src="defaultTeamImge"
                />
            </template>
            <template #bottom>
                <span>最大人数：{{ team.maxNum }}</span>
                <div>创建时间：{{ team.createTime }}</div>
                <div>过期时间：{{ team.expireTime }}</div>
            </template>
            <template #tags>
                <van-tag style="margin-right: 8px;" round type="primary">{{ teamStatus[team.status] }}</van-tag>
            </template>
            <template #footer>
                <van-button size="mini" type="success" @click="updateTeam(team.id)" plain>更新队伍</van-button>
                <van-button size="mini" type="danger"  @click="deleteTeam(team.id)" plain>解散队伍</van-button>
            </template>
            </van-card>
        </div>
        <van-empty v-if="teams.length === 0" image="search" description="暂无信息" />
    </div>
    
</template>

<style scoped>
.vn-toast--text{
    background: rgba(0, 0, 0, 0.7);
}
</style>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import Myaxios from '../plugins/MyAxios'
import { teamStatus } from '../constants/teamStatus';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
import defaultTeamImge from '../tempImageFiles/defaultTeam.png'

const teams = ref([])
const router = useRouter()
const deleteTeamForm = reactive({
    id: ''
})

onMounted( async ()=>{
    const res = await Myaxios.post('/userCreateTeam');
    if(res.data.code === 200){
        teams.value = res.data.data
    }
})

const updateTeam = (id) => {
    router.push({
        path: '/updateTeam',
        query:{
            teamId: id
        }
    })
}

const deleteTeam = async (id) => {
    deleteTeamForm.id = id
    const res = await Myaxios.post("/deleteTeam", deleteTeamForm);
    if(res.data.code === 200){
        showSuccessToast("解散成功")
        router.push({
            path: '/createTeam',
            replace: true,
        })
    }
    else{
        showFailToast("解散失败" + res.data.message)
    }
}

</script>